<!--/**
* Author: ganqz
* Date: 2021-05-29 22:12
* Desc: LeftRight
*/
-->
<template>
  <div class="flex left-right flex-m" :style="{ background, fontSize, color }">
    <div class="flex-1 item">{{ en }}</div>
    <div class="flex-1 item">{{ cn }}</div>
  </div>
</template>

<script>
import style from '@/styles/varHelper/_var.scss';
export default {
  name: 'LeftRight',
  components: {},
  props: {
    en: {
      type: String,
      default: 'English'
    },
    cn: {
      type: String,
      default: '中文'
    },
    background: {
      type: String,
      default: style.mainColor
    },
    fontSize: {
      type: String,
      default: '0.36rem'
    },
    color: {
      type: String,
      default: '#fff'
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  methods: {}
};
</script>
<style lang="scss">
.left-right {
  color: #fff;
  line-height: 1.5;
  min-height: 0.8rem;
  .item {
    position: relative;
    padding: 0.2rem;
    word-break: break-all;
    word-wrap: break-word;
    &:first-child {
      &::after {
        content: '';
        display: inline-block;
        height: 70%;
        background: #eee;
        width: 1px;
        top: 50%;
        right: 0;
        position: absolute;
        transform: translateY(-50%);
      }
    }
  }
}
</style>
